<template>
  <div class="table-list f-r j-b">
    <div class="left">
      <div class="f-r a-c j-b" style="margin-bottom: 15px">
        <div class="title">组内的田</div>
        <el-button type="primary">添加田</el-button>
      </div>
      <div class="table-box">
        <el-table
          v-loading="loading"
          stripe
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column type="selection" align="center" />
          <el-table-column type="index" align="center" label="序号" />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :align="item.align || 'center'"
            :min-width="item.minWidth"
          />
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </div>
    <div class="right f-c">
      <div class="f-r a-c j-b" style="margin-bottom: 15px;padding: 10px 15px;border-bottom: 1px solid #E6E6E6">
        <div class="title">当前登录人的田</div>
        <el-button type="primary">添加田</el-button>
      </div>
      <el-input
        v-model="searchParams.value"
        clearable
        style="margin-bottom: 14px;width: 100%"
      >
        <el-button slot="suffix" type="text">搜索</el-button>
      </el-input>
      <div style="padding: 0 14px 24px 14px" class="f-g">
        <div class="f-r j-b" style="height: 100%">
          <div class="right-l">
            <div class="title" style="padding-left: 14px">散田</div>
            <div class="right-l-list">
              <div class="right-l-item">
                <el-checkbox>
                  编辑田块1
                </el-checkbox>
              </div>
              <div class="right-l-item">
                <el-checkbox>
                  编辑田块1
                </el-checkbox>
              </div>
            </div>
          </div>
          <div class="right-r f-c" style="height: 100%">
            <div class="f-g">
              <el-table
                v-loading="loading2"
                height="100%"
                stripe
                :data="tableData2"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 0.8)"
              >
                <el-table-column type="selection" align="center" width="40px" />
                <el-table-column
                  label=""
                  prop="fieldName"
                >
                  <template slot="header" slot-scope="scope">
                    <sapn>全选</sapn>
                    <el-checkbox v-model="unCheckedAll" style="margin-left: 20px">
                      <span style="color: #909399;font-size: 12px;font-weight: bold">反选</span>
                    </el-checkbox>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="page-box">
              <el-pagination
                background
                :current-page="pageNo"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout=" prev, pager, next, jumper"
                :total="totalSize"
                @size-change="changePageSize"
                @current-change="changePageNo"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import crud from '@/mixins/crud';
import { http_farmland_group } from '@/api';

export default {
  name: 'FieldPage',
  mixins: [crud],
  props: {
    groupId: [String, Number]
  },
  data() {
    return {
      searchParams: {},
      columns: [
        { prop: 'fieldName', label: '田名称', minWidth: '' },
        { prop: 'cropName', label: '作物', minWidth: '' },
        { prop: 'area', label: '亩数', minWidth: '' }
      ],
      loading2: false,
      tableData2: [],
      checkedAll: false,
      unCheckedAll: false
    }
  },
  methods: {
    initData() {
      http_farmland_group.fieldPage({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        id: this.groupId
      }).then(res => {
        this.tableData = res.rows
        this.totalSize = res.total
      })

      http_farmland_group.myFieldPage().then(res => {
        this.tableData2 = res.rows
      })
    }
  }
}
</script>

<style scoped lang="scss">
.table-list {
  height: calc(100% - 70px);
  margin-bottom: 20px;
  .left,
  .right {
    width: 48%;
  }
  .right {

    border-radius: 4px;
    border: 1px solid #E6E6E6;
    background: rgba(248,248,248,0.69);
    .el-input {
      width: calc(100% - 14px) !important;
    }
  }
}
</style>
